<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.thumbnail{
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}
</style>
</head>
<body>
    <h3>图片库</h3>
    <p>试着调整窗口，看看当图片没有足够的空间会发生什么。</p>
    <img class="thumbnail" src="https://www.runoob.com/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="https://www.runoob.com/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="https://www.runoob.com/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="https://www.runoob.com/images/klematis4_small.jpg" width="120" height="90">
    <img class="thumbnail" src="https://www.runoob.com/images/klematis_small.jpg" width="107" height="90">
    <img class="thumbnail" src="https://www.runoob.com/images/klematis2_small.jpg" width="107" height="80">
    <img class="thumbnail" src="https://www.runoob.com/images/klematis3_small.jpg" width="116" height="90">
    <img class="thumbnail" src="https://www.runoob.com/images/klematis4_small.jpg" width="120" height="90">
    </body>
</html>